<template>
  <div class="app1-container">
    <h3 style="margin-left:50px">填写申请信息</h3>
    <el-form :model="form" :rules="rules" ref="form" label-width="120px">
      <div class="frist_card">
        <!-- 基本信息分组 -->
        <el-form-item label=" 基本信息" prop="" class="form-title"></el-form-item>

        <!-- 老人姓名 -->
        <el-form-item label="老人姓名" prop="name">
          <el-select
              v-model="form.name"
              placeholder="请选择"
              clearable
              filterable
              @change="handleElderSelect"
              class="form-input"
          >
            <el-option
                v-for="item in elderOptions"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-form-item>

        <!-- 身份证号（对应form.idCard） -->
        <el-form-item label="老人身份证号" prop="idCard">
          <el-input
              v-model="form.idCard"
          placeholder="老人身份证号"
          clearable
          class="form-input"
          />
        </el-form-item>

        <!-- 联系方式（对应form.mobile） -->
        <el-form-item label="联系方式" prop="mobile">
          <el-input
              v-model="form.mobile"
          placeholder="联系方式"
          clearable
          class="form-input"
          />
        </el-form-item>

        <!-- 费用期限（对应form.endTime） -->
        <el-form-item label="费用期限" prop="endTime">
          <el-input
              v-model="form.endTime"
          placeholder="费用期限"
          clearable
          class="form-input"
          />
        </el-form-item>

        <!-- 护理等级（对应form.careLevelId） -->
        <el-form-item label="护理等级" prop="careLevelId">

          <el-input
              v-model="careLevelName"
              placeholder="暂无护理等级"
              clearable
              class="form-input"
              readonly
          />
        </el-form-item>

        <!-- 入住床位（对应form.bedNo） -->
        <el-form-item label="入住床位" prop="bedNo">
          <el-input
              v-model="form.bedNo"
          placeholder="入住床位"
          clearable
          class="form-input"
          />
        </el-form-item>

        <!-- 签约合同（对应form.contractName） -->
        <el-form-item label="签约合同" prop="contractName">
          <el-input
              v-model="form.contractName"
          placeholder="签约合同"
          clearable
          class="form-input"
          />
        </el-form-item>

        <!-- 养老顾问（对应form.consultant） -->
        <el-form-item label="养老顾问" prop="consultant">
          <el-input
              v-model="form.consultant"
          placeholder="养老顾问"
          clearable
          class="form-input"
          />
        </el-form-item>

        <!-- 护理员（对应form.caregiverNames） -->
        <el-form-item label="护理员" prop="caregiverNames">
          <el-input
              v-model="form.caregiverNames"
          placeholder="护理员"
          clearable
          class="form-input"
          />
        </el-form-item>
      </div>

      <div class="frist_card">
        <!-- 申请信息分组 -->
        <el-form-item label="申请信息" prop="" class="form-title"></el-form-item>

        <!-- 退住日期（对应form.checkoutTime） -->
        <el-form-item label="*退住日期" prop="checkoutTime">
          <el-date-picker
              v-model="form.checkoutTime"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="选择退住日期"
              clearable
              class="form-input"
          />

        </el-form-item>

        <!-- 退住原因（对应form.checkoutReason） -->
        <el-form-item label="*退住原因" prop="checkoutReason">
          <el-select
              v-model="form.checkoutReason"
              placeholder="请选择"
              clearable
              class="form-input"
          >
            <el-option
                v-for="(item, index) in reasonOptions"
            :key="index"
            :label="item"
            :value="item"
            />
          </el-select>
        </el-form-item>

        <!-- 备注（对应form.remark） -->
        <el-form-item label="备注" prop="remark">
          <el-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入"
              :maxlength="100"
              show-word-limit
              rows="2"
              class="form-input"
          />
        </el-form-item>
      </div>

      <!-- 表单操作按钮 -->
      <div style="text-align: center;" class="form-btns">
        <el-button @click="goBack" style="margin-right: 10px;">返回</el-button>
        <el-button v-if="isTo" type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { ElderDtoListCheckOut } from '@/api/elder/elder.js'
import {addCheckout } from '@/api/check/checkout.js'
import {listLevel} from '@/api/service/level.js'
export default {
  name: "ApplyForm",
  data() {
    return {
      levelList: new Map(),
      isTo:true,
      // 表单数据模型（已与后端一致）
      form: {
        id: "",
        name: "",
        idCard: "",
        mobile: "",
        endTime: "",
        careLevelId: "",
        bedNo: "",
        contractName: "",
        consultant: "",
        caregiverNames: "",
        checkoutTime: "",
        checkoutReason: "",
        contractUrl:"",
        remark: ""
      },
      insertForm: {
        id: null,                 // 主键（新增时可为空）
        checkoutNo: null,         // 退住编号
        title: null,              // 标题
        elderId: null,            // 老人ID
        businessId: null,         // 业务ID（流程实例ID，可为空）
        name: null,               // 姓名
        idCardNo: null,           // 身份证号
        contact: null,            // 联系方式
        stayStart: null,          // 入住开始时间（如 "2024-05-01"）
        stayEnd: null,            // 入住结束时间（如 "2025-10-01"）
        careLevel: null,          // 护理等级（如 "一级护理"）
        bedNo: null,              // 入住床位号
        contractUrl: null,        // 签约合同URL
        contractNo: null,         // 合同编号
        consultant: null,         // 养老顾问
        caregiverName: null,      // 护理员名称
        checkoutTime: null,       // 退住时间（如 "2025-10-15"）
        checkoutReason: null,     // 退住原因
        applicant: null,          // 申请人姓名
        applicantId: null,        // 申请人ID
        applicantDept: null,      // 申请人部门编号
        applyTime: null,          // 申请时间（如 "2025-10-15T10:30:00"）
        createdAt: null,          // 创建时间（自动生成可为空）
        updatedAt: null           // 更新时间（自动生成可为空）
      },

      // 表单验证规则（与form字段对应）
      rules: {
        name: [{required: true, message: "请选择老人姓名", trigger: "change"}],  // 对应form.name
        checkoutTime: [{required: true, message: "请选择退住日期", trigger: "change"}],  // 对应form.checkoutTime
        checkoutReason: [{required: true, message: "请选择退住原因", trigger: "change"}]  // 对应form.checkoutReason
      },
      elderOptions: [], // 老人姓名选项
      reasonOptions: [
        '老人个人原因', '护理质量不高', '服务不周', '管理混乱', '费用高昂', '违规退住', '其他'
      ]
    };
  },
  methods: {
    // 提交表单
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.insertForm.checkoutTime = this.form.checkoutTime || '';   // 退住时间
          this.insertForm.checkoutReason = this.form.checkoutReason || ''; // 退住原因
          this.insertForm.remark = this.form.remark || '';

          console.log(this.insertForm);
          // 同步时间类字段（重点）
          this.insertForm.stayStart = this.formatDateToISO(this.insertForm.stayStart);
          this.insertForm.stayEnd = this.formatDateToISO(this.insertForm.stayEnd);

            console.log(this.insertForm);
            addCheckout(this.insertForm).then(response => {
                    if (response.code === 200){
              this.$emit('update-id', response.data.id)   ;
              this.$message.success("提交成功");
                this.$emit("next")
              }else if(response.code === 500){

                this.$message.error(response.msg);
              }

          })
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });
    },
    formatDateToISO(date) {
      if (!date) return null;
      if (typeof date === "string") date = new Date(date);
      return date.toISOString(); // 例如：2025-10-01T00:00:00.000Z
    },

    // 选择老人后自动填充数据（与form新字段对应）
    handleElderSelect(selectedName) {
      const matchedElder = this.elderOptions.find(item => item.name === selectedName);
      if (matchedElder) {

        // 填充字段与form保持一致（需与接口返回的老人数据字段匹配）
        this.form.idCard = matchedElder.idCard || '';         // 身份证号
        this.form.mobile = matchedElder.mobile || '';         // 联系方式
        this.form.endTime = matchedElder.endTime || '';       // 费用期限
        this.form.careLevelId = matchedElder.careLevelId || ''; // 护理等级
        this.form.bedNo = matchedElder.bedNo || '';           // 入住床位
        this.form.contractName = matchedElder.contractName || ''; // 签约合同
        this.form.consultant = matchedElder.consultant || ''; // 养老顾问
        this.form.caregiverNames = matchedElder.caregiverNames || ''; // 护理员


      //   insertForm.elderId = matchedElder.id;
        this.insertForm.elderId = matchedElder.id || ''; // 老人ID
        this.insertForm.name = matchedElder.name || ''; // 姓名
        this.insertForm.idCardNo = matchedElder.idCard || ''; // 身份证号
        this.insertForm.contact = matchedElder.mobile || ''; // 联系方式
        this.insertForm.stayStart = matchedElder.startTime || ''; // 入住开始时间
        this.insertForm.stayEnd = matchedElder.endTime || ''; // 入住结束时间
        this.insertForm.careLevel = matchedElder.careLevelId || ''; // 护理等级ID
        this.insertForm.bedNo = matchedElder.bedNo || ''; // 入住床位号
        this.insertForm.contractNo = matchedElder.contractNo || ''; // 合同编号
        this.insertForm.contractUrl = matchedElder.agreementUrl || ''; // 合同URL
        this.insertForm.consultant = matchedElder.consultant || ''; // 顾问
        this.insertForm.caregiverName = matchedElder.caregiverNames || ''; // 护理员
      } else {
        // 清空已填充的字段（与form字段对应）
        this.form.idCard = '';
        this.form.mobile = '';
        this.form.endTime = '';
        this.form.careLevelId = '';
        this.form.bedNo = '';
        this.form.contractName = '';
        this.form.consultant = '';
        this.form.caregiverNames = '';
      }
    },

    // 重置表单
    resetForm() {
      this.$refs.form.resetFields();
    },

    // 返回上一页
    goBack() {
      this.$router.push("/checkinManagement/checkout/checkout"); // 或跳转到指定页面
    },

    // 获取老人下拉选项
    getOptions() {
      ElderDtoListCheckOut().then(res => {
        this.elderOptions = res.data || [];
      }).catch(err => {
        this.$message.error("获取老人列表失败");
        console.error(err);
      });
    }
  },
  computed: {
    // 计算属性：根据 careLevelId 从 levelList 中获取等级名称
    careLevelName() {
      // 1. 从 Map 中获取对应的等级对象
      const levelInfo = this.levelList.get(this.form.careLevelId);
      // 2. 存在则返回 levelName，否则返回空字符串
      return levelInfo ? levelInfo.levelName : '';
    }
  },

  mounted() {
    this.getOptions();
    listLevel({}).then(res => {
      console.log(res);
      console.log(res.rows);
      res.rows.forEach(item => {
        this.levelList.set(item.id, item)
      });
      console.log(this.levelList);
    })
  },

};
</script>

<style scoped>
/* 样式保持不变 */
.frist_card {
  background-color: #fafafa;
  border-left: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 20px 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin-bottom: 20px; /* 增加分组间距 */
}

.app1-container {
  background-color: white;
  padding: 20px;
}

.form-title {
  font-weight: bold;
  margin-bottom: 20px;
  color: #000;
}

.form-input {
  width: 300px;
}

.form-btns {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto 0; /* 调整按钮位置 */
}
</style>